<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>计算属性实现名称计算</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      姓：<input type="text" v-model="firstName" />
      <br />
      名：<input type="text" v-model="lastName" />
      <br />
      其他信息：<input type="text" placeholder="不影响计算属性"/>
      <br />
      <!--直接使用插值表达式引入计算属性-->
      全名：<span>{{fullName}}</span>
      <br />

      <!--计算属性最重要的一个特性，有缓存功能。
          1：初次读取时会调用get方法，以后都从缓存拿。
          2：依赖的数据发生变化时，才重新调用更新数据。
      -->
      全名：<span>{{fullName}}</span>
      <br />
      全名：<span>{{fullName}}</span>
      <br />
      全名：<span>{{fullName}}</span>
      <br />
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        //data中的即为属性和属性值
        firstName: "张",
        lastName: "三",
      },
      //计算属性，和data分开写，同样也是对象方式     自动调用get并将结果放到VM，名字为属性名
      computed: {
        //每个属性都是对象形式，且可能计算逻辑复杂
        fullName: {
          //提供get方法，  这也是计算属性的底层，通过Object.defaultProperty
          get() {
            console.log("get被调用了");
            //被依赖的数据发生变化时，重新调用get方法计算。
            return this.firstName + "-" + this.lastName;
          },
          //set不是必须的，但是如果需要被改动，必须写，否则会报错。
          set(value) {
            console.log("set被调用了，" + value);
            //注意，接收到值以后，页面没有变化，
            //是因为计算属性只会跟着上面两个变动。所以源头要修改上面两个属性值。修改后因为变动会自动调用get刷新
            const arr = value.split("-");
            this.firstName = arr[0];
            this.lastName = arr[1];
          },
        },
      },
    });
  </script>
</html>
